<script setup lang="ts">
import {ref, watch} from 'vue'
import { Form, Field,  Button ,NavBar ,Icon} from 'vant'
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify"
import "vue3-slide-verify/dist/style.css"
import { http } from "../../apis/user"
import { useRouter } from 'vue-router';
let usernam=ref('')
let password=ref('')
let pattern=/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
let isLogin= ref(true)
let flag= ref(false)
const veri=ref()
const block = ref<SlideVerifyInstance>();
const router = useRouter()
//返回其他页面
function backFn():void { }
//提交账号密码
function onSubmit():void{
  if (flag) {
    if (isLogin) {
      console.log('ok');
      http.login(usernam.value, password.value).then((data:any) => {
        if (data.resultCode === 200) {
          localStorage.setItem("xftoken", data.data);
          router.replace("/Home")
        }
      })
    } else {
      http.register(usernam.value, password.value).then((data:any) => {
        if (data.resultCode === 200) {
        }
        isLogin = ref(true)
      });
    }
  } else {
    onRefresh()
  }
}
function onRefresh(){
}
const onAgain = () => {
    //  "检测到非人为操作的哦！ try again"
      // 刷新
      block.value?.refresh();
    };
watch(isLogin, () => {
  usernam.value=''
  password.value=''
})
function alertFn(val:number) :void{
  flag.value = val == 1 ? true : false;
  console.log(flag.value);
  
}
</script>
<template>
  <div>
    <!-- 头部导航 开始-->
    <NavBar  :title="isLogin ? '登录' : '注册'" left-text="返回" left-arrow @click-left="backFn">
      <template #right>
        <Icon name="ellipsis" />
      </template>
    </NavBar>
    <!-- 头部导航 结束-->
    <!-- logo 开始-->
    <img src="../../assets/mlogo.png" alt="" class="logo_img" />
    <!-- logo 结束-->
    <!-- 账号密码 开始-->
    <Form @submit="onSubmit">
      <Field v-model="usernam" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ pattern, message: '请填写正确的手机号' }]" />
      <Field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <!-- 账号密码 结束-->

      <!-- 验证码 开始-->
      <SlideVerify
      :type="2"
   
      @success="alertFn(1)"
      @fail="alertFn(2)"
      @refresh="onRefresh"
      ref="veri"
      slider-text="点击向右滑动"
      :show=true
      class="yzm"></SlideVerify>
      <!-- 验证码 结束-->
      <p @click="isLogin = !isLogin" class="zhu">
        {{ isLogin ? "立即注册" : "已有账号,立即登录" }}
      </p>
      <div style="margin: 16px">
        <Button round block type="primary" native-type="submit">{{
            isLogin ? "登录" : "注册"
        }}</Button>
      </div>
    </Form>
  </div>
</template>

<style  lang="less">
.logo_img {
  width: 3.2rem;
  height: 3.2rem;
  display: block;
  margin: 2.13333rem auto 0;
}

.zhu {
  font-size: .3rem;
  color: rgb(48, 121, 223);
  margin-left: 43%;
}
.yzm{
  margin: 0 auto;
}

</style>